Promise 介紹

• 異步執行的控制流程架構
• 把多個異步執行的函式的執行流程轉成為一個一個執行（序列執行），或是等全部處理完再說（並行執行）
• 前端使用時機：AJAX、DOM事件處理、動畫流程處理（計時器）

建立 Promise 函式

function asyncFunction(value){  //通常會包在函式中
	new Promise(function(resolve, reject){
		resolve(value)   //成功時
		reject(reason)   //失敗時
	})
}

promise.then(function(value){
		//成功時
},function(reason){
	  //失敗時
})

//ES6
new Promise((resolve, reject) => {...})

//resolve：成功
//reject：失敗

//then：接收成功的訊息
//catch：接收失敗的訊息

範例說明

var promise = function(person, time, success){
	return new Promise(function(resolve, reject){
		if(success){
			resolve(person + '抵達終點')
		}else{
			reject(new Error(person + '失敗'))
		}
	})
}

promise('小明', 2000, true).then(function(response){
	console.log(response)
		//小明抵達終點
}).catch(function(response){
		console.log(response)
		//因為是true不會有任何訊息
		//改成false之後會變成小明失敗
})

//加入非同步setTimeout(才能看出Promise的功用)
//沒使用Promise的話setTimeout的函式就會是最後一個被執行的

var promise = function(person, time, success){
	return new Promise(function(resolve, reject){
		if(success){
			setTimeout(function(){
				resolve(person + (time/1000) + '秒抵達終點')
			},time);
		}else{
			reject(new Error(person + '失敗'))
		}
	})
}

promise('小明', 2000, true).then(function(response){
	console.log(response)
	return promise('胖虎', 3000, true);
}).then(function(response){
	console.log(response)
}).catch(function(response){
		console.log(response)
})

//小明2秒抵達終點=>胖虎3秒抵達終點

Promise.all

• Promise.all可以同時去執行好幾個promise函式（並行運算）
• 所有的陣列傳入參數的Promise物件都要解決才進行下一步

Promise.all()

//裡面常放的是陣列[]
//也可放String、TypedArray、Map、Set

var promise = function(person, time, success){
	return new Promise(function(resolve, reject){
		if(success){
			setTimeout(function(){
				resolve(person + (time/1000) + '秒抵達終點')
			},time);
		}else{
			reject(new Error(person + '失敗'))
		}
	})
}

Promise.all([promise('小明', 2000, true), promise('胖虎', 3000, true)])
	.then(function(response){
		console.log(response)
	}).catch(function(err){
		console.log(err)
	})

//["小明2秒抵達終點", "胖虎3秒抵達終點"]

Promise.race

• 任一個陣列傳入參數的Promise物件有解決，就會到下一步去

Promise.race()

//裡面常放的是陣列[]
//也可放String、TypedArray、Map、Set

var promise = function(person, time, success){
	return new Promise(function(resolve, reject){
		if(success){
			setTimeout(function(){
				resolve(person + (time/1000) + '秒抵達終點')
			},time);
		}else{
			reject(new Error(person + '失敗'))
		}
	})
}

Promise.race([promise('小明', 2000, true), promise('胖虎', 3000, true)])
	.then(function(response){
		console.log(response)
	}).catch(function(err){
		console.log(err)
	})

//小明2秒抵達終點

//=>只會回傳速度比較快的那個